<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="img/prime_icon.png">
        <title>prime</title>
        <!--
        <link rel="stylesheet/less" type="text/css" href="../less/prime.less" />
        <script src="../less.min.js"></script>
        -->
        <link rel="stylesheet" type="text/css" href="../build/prime.css" />
        <!--
        <link rel="stylesheet" type="text/css" href="../build/prime.min.css" />
        -->

        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <!-- <style>
            /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
            ::-webkit-scrollbar
            {
                width: 5px;
                height: 5px;
                background-color: #f5f5f5;
            }

            /*定义滚动条轨道 内阴影+圆角*/
            ::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .08);
                /* border-radius: 5px; */
                background-color: #f5f5f5;
            }

            /*定义滑块 内阴影+圆角*/
            ::-webkit-scrollbar-thumb
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                /* border-radius: 5px; */
                background-color: #ccc;
            }
        </style> -->
    </head>

    <body id="mainbody">
        <div class="wrapper">

            <!-- 导航菜单 -->
            <div class="navs-fixed">
                <div class="popmenu popmenu-icon">
                    <a class="popmenu-item" href="#section-colors">
                        <i class="icon iconfont icon-theme-inverse"></i>
                        <span>配色</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-grid">
                        <i class="icon iconfont icon-apps"></i>
                        <span>布局</span>
                    </a>
                    <a class="popmenu-item" href="#section-table">
                        <i class="icon iconfont icon-list"></i>
                        <span>表格</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-btn">
                        <i class="icon iconfont "></i>
                        <span>按钮</span>
                    </a>
                    <a class="popmenu-item" href="#section-btngroup">
                        <i class="icon iconfont "></i>
                        <span>按钮组</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-popmenu">
                        <i class="icon iconfont "></i>
                        <span>气泡菜单</span>
                    </a>
                    <a class="popmenu-item" href="#section-chkradio">
                        <i class="icon iconfont icon-ok "></i>
                        <span>单选、复选</span>
                    </a>
                    <a class="popmenu-item" href="#section-select">
                        <i class="icon iconfont icon-menu "></i>
                        <span>下拉框</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-tabs">
                        <i class="icon iconfont icon-folder "></i>
                        <span>标签页</span>
                    </a>
                    <a class="popmenu-item" href="#section-tag">
                        <i class="icon iconfont "></i>
                        <span>标签</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-input">
                        <i class="icon iconfont "></i>
                        <span>输入框</span>
                    </a>
                    <a class="popmenu-item" href="#section-inputgroup">
                        <i class="icon iconfont "></i>
                        <span>组合输入框</span>
                    </a>
                    <a class="popmenu-item" href="#section-form">
                        <i class="icon iconfont icon-edit "></i>
                        <span>表单</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-mask">
                        <i class="icon iconfont "></i>
                        <span>遮罩层</span>
                    </a>
                    <a class="popmenu-item" href="#section-dlg">
                        <i class="icon iconfont icon-layer "></i>
                        <span>对话框</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-iconfont">
                        <i class="icon iconfont icon-like-inverse "></i>
                        <span>图标</span>
                    </a>
                    <div class="split"></div>
                    <a class="popmenu-item" href="#section-text">
                        <i class="icon iconfont icon-document "></i>
                        <span>排版</span>
                    </a>
                    <a class="popmenu-item" href="#section-comm">
                        <i class="icon iconfont icon-switch "></i>
                        <span>通用类</span>
                    </a>
                </div>
            </div>
            <div class="backtop-fixed">
                <a class="btn" href="#"><i class="iconfont icon-rocket"></i></a>
            </div>

            <!-- prime -->
            <div class="section">
                <cite>https://github.com/dannyxu100/prime</cite>
                <h1 class="bold">prime <small>.h1</small></h1>
                <hr/>
                <h2>追求简单好用，轻量的css库 <small>.h2</small></h2>
                <div class="h2">我不会热烈欢迎你使用 <small>.h2</small></div>
                <h3>当然，如果你强烈要求 <small>.h3</small></h3>
                <h4>你还是可以拿去用 <small>.h4</small></h4>
                <h5>不谢 <small>.h5</small></h5>
                <h6 class="bold fnice">非要感谢的话，掏钱吧！ <small>.h6 等于正文字体大小</small></h6>
            </div>

            <!-- 基调配色 -->
            <div class="section" id="section-colors">
                <h2>基调配色</h2>
                <h3>色块</h3>
                <div>.bgtheme | .bgkey | .bglight | .bgnice | .bgblack | .bgwhite | .bggray</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <div class="colorblock bgtheme-lightest">
                                <div>主题-最亮</div>
                                <div>.bgtheme-lightest</div>
                                <div>#D8F6FE</div>
                            </div>
                            <div class="colorblock bgtheme-lighter fwhite">
                                <div>主题-较亮</div>
                                <div>.bgtheme-lighter</div>
                                <div>#74DEFC</div>
                            </div>
                            <div class="colorblock bgtheme-light fwhite">
                                <div>主题-亮</div>
                                <div>.bgtheme-light</div>
                                <div>#43D3FC</div>
                            </div>
                            <div class="colorblock active bgtheme fwhite">
                                <div>主题</div>
                                <div>.bgtheme</div>
                                <div>#05C3F9</div>
                            </div>
                            <div class="colorblock bgtheme-dark fwhite">
                                <div>主题-暗</div>
                                <div>.bgtheme-dark</div>
                                <div>#319DBB</div>
                            </div>
                            <div class="colorblock bgtheme-darker fwhite">
                                <div>主题-较暗</div>
                                <div>.bgtheme-darker</div>
                                <div>#027FA2</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock empty"></div>
                            <div class="colorblock empty"></div>
                            <div class="colorblock bgkey-light fwhite">
                                <div>关键的-亮</div>
                                <div>.bgkey-light</div>
                                <div>#FC7E6A</div>
                            </div>
                            <div class="colorblock active bgkey fwhite">
                                <div>关键的</div>
                                <div>.bgkey</div>
                                <div>#F95339</div>
                            </div>
                            <div class="colorblock bgkey-dark fwhite">
                                <div>关键的-暗</div>
                                <div>.bgkey-dark</div>
                                <div>#BB5D4F</div>
                            </div>
                            <div class="colorblock bgkey-darker fwhite">
                                <div>关键的-较暗</div>
                                <div>.bgkey-darker</div>
                                <div>#A22613</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock bglight-lightest">
                                <div>闪亮的-最亮</div>
                                <div>.bglight-lightest</div>
                                <div>#FFFFC5</div>
                            </div>
                            <div class="colorblock bglight-lighter">
                                <div>闪亮的-较亮</div>
                                <div>.bglight-lighter</div>
                                <div>#FFFF73</div>
                            </div>
                            <div class="colorblock bglight-light">
                                <div>闪亮的-亮</div>
                                <div>.bglight-light</div>
                                <div>#FFFF41</div>
                            </div>
                            <div class="colorblock active bglight">
                                <div>闪亮的</div>
                                <div>.bglight</div>
                                <div>#FFFF01</div>
                            </div>
                            <div class="colorblock bglight-dark ">
                                <div>闪亮的-暗</div>
                                <div>.bglight-dark</div>
                                <div>#FFF201</div>
                            </div>
                            <div class="colorblock bglight-darker ">
                                <div>闪亮的-较暗</div>
                                <div>.bglight-darker</div>
                                <div>#FFD301</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock empty"></div>
                            <div class="colorblock bgnice-lighter fwhite">
                                <div>友好的-较亮</div>
                                <div>.bgnice-lighter</div>
                                <div>#67E3B1</div>
                            </div>
                            <div class="colorblock bgnice-light fwhite">
                                <div>友好的-亮</div>
                                <div>.bgnice-light</div>
                                <div>#39E39E</div>
                            </div>
                            <div class="colorblock active bgnice fwhite">
                                <div>友好的</div>
                                <div>.bgnice</div>
                                <div>#01C677</div>
                            </div>
                            <div class="colorblock bgnice-dark fwhite">
                                <div>友好的-暗</div>
                                <div>.bgnice-dark</div>
                                <div>#269568</div>
                            </div>
                            <div class="colorblock bgnice-darker fwhite">
                                <div>友好的-较暗</div>
                                <div>.bgnice-darker</div>
                                <div>#00814D</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock empty"></div>
                            <div class="colorblock empty"></div>
                            <div class="colorblock bgblack-light fwhite">
                                <div>黑-亮</div>
                                <div>.bgblack-light</div>
                                <div>#666</div>
                            </div>
                            <div class="colorblock active bgblack fwhite">
                                <div>黑</div>
                                <div>.bgblack</div>
                                <div>#444</div>
                            </div>
                            <div class="colorblock bgblack-dark fwhite">
                                <div>黑-基础</div>
                                <div>.bgblack-dark</div>
                                <div>#333</div>
                            </div>
                            <div class="colorblock bgblack-darker fwhite">
                                <div>黑-暗</div>
                                <div>.bgblack-darker</div>
                                <div>#222</div>
                            </div>
                            <div class="colorblock bgblack-darkest fwhite">
                                <div>黑-最暗</div>
                                <div>.bgblack-darkest</div>
                                <div>#000</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock empty"></div>
                            <div class="colorblock bggray-lighter">
                                <div>灰-较亮</div>
                                <div>.bggray-lighter</div>
                                <div>#EEE</div>
                            </div>
                            <div class="colorblock bggray-light">
                                <div>灰-亮</div>
                                <div>.bggray-light</div>
                                <div>#DDD</div>
                            </div>
                            <div class="colorblock active bggray">
                                <div>灰</div>
                                <div>.bggray</div>
                                <div>#CCC</div>
                            </div>
                            <div class="colorblock bggray-dark fwhite">
                                <div>灰-暗</div>
                                <div>.bggray-dark</div>
                                <div>#BBB</div>
                            </div>
                            <div class="colorblock bggray-darker fwhite">
                                <div>灰-较暗</div>
                                <div>.bggray-darker</div>
                                <div>#AAA</div>
                            </div>
                            <div class="colorblock bggray-darkest fwhite">
                                <div>灰-最暗</div>
                                <div>.bggray-darkest</div>
                                <div>#999</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock empty"></div>
                            <div class="colorblock empty"></div>
                            <div class="colorblock bgwhite-light">
                                <div>白-亮</div>
                                <div>.bgwhite-light</div>
                                <div>#FFF</div>
                            </div>
                            <div class="colorblock active bgwhite">
                                <div>白</div>
                                <div>.bgwhite</div>
                                <div>#FAFAFA</div>
                            </div>
                            <div class="colorblock bgwhite-dark">
                                <div>白-暗</div>
                                <div>.bgwhite-dark</div>
                                <div>#F7F7F7</div>
                            </div>
                            <div class="colorblock bgwhite-darker">
                                <div>白-较暗</div>
                                <div>.bgwhite-darker</div>
                                <div>#F5F5F5</div>
                            </div>
                            <div class="colorblock bgwhite-darkest">
                                <div>白-最暗</div>
                                <div>.bgwhite-darkest</div>
                                <div>#F3F3F3</div>
                            </div>
                        </div>
                    </div>
                </div>

                <br/>
                <div>我这个配色方案中还给出一些辅助色，参考一下得了</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#5ADBD3">
                                <div>#5ADBD3</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#ED0145">
                                <div>#ED0145</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#D13079">
                                <div>#D13079</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#710AAA">
                                <div>#710AAA</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#FF6000">
                                <div>#FF6000</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#FFBA73">
                                <div>#FFBA73</div>
                            </div>
                        </div>
                        <div class="cell-7-1">
                            <div class="colorblock-small" style="border-color:#F8F1CE">
                                <div>#F8F1CE</div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <br/>


                <h3>文本</h3>
                <div>深暗色调</div>
                <div>.ftheme | .fkey | .fnice | .fblack</div>
                <ul class="textbox5">
                    <li class="ftheme">Look inside</li>
                    <li class="ftheme">看看</li>
                    <li class="ftheme">Look inside your tiny mind</li>
                    <li class="ftheme">看看你那浅薄的思想</li>
                </ul>
                <ul class="textbox5">
                    <li class="fkey">then look a bit harder</li>
                    <li class="fkey">放远大点吧</li>
                    <li class="fkey">Cause we're so uninspired</li>
                    <li class="fkey">因为那里装不下灵魂</li>
                </ul>
                <ul class="textbox5">
                    <li class="fnice">So sick and tired of all the hatred you harbor</li>
                    <li class="fnice">如此恶心另人厌倦 全是罪恨</li>
                    <li class="fnice">So you say</li>
                    <li class="fnice">所以你说</li>
                </ul>
                <ul class="textbox5">
                    <li class="fblack">It's not okay to be gay</li>
                    <li class="fblack">你不认同同性恋</li>
                    <li class="fblack">Well I think you're just evil</li>
                    <li class="fblack">然而我覺得你是個魔鬼</li>
                </ul>

                <div>明亮色调</div>
                <div>.flight | .fwhite | .fgray</div>
                <ul class="textbox10 bgimg-dark">
                    <li class="flight">You're just some racist who can't tie my laces</li>
                    <li class="flight">你就是一种种族歧视 連鞋帶都不配給我系</li>
                    <li class="flight">Your point of view is medieval</li>
                    <li class="flight">你的觀點已經過時</li>
                </ul>
                <ul class="textbox10 bgimg-dark">
                    <li class="fgray">Fuck you (Fuck you)</li>
                    <li class="fgray">去你的</li>
                    <li class="fgray">Fuck you very, very much</li>
                    <li class="fgray">真的是去你媽的</li>
                </ul>
                <ul class="textbox10 bgimg-dark">
                    <li class="fwhite">Cause your words don't translate</li>
                    <li class="fwhite">因为我们语言不通</li>
                    <li class="fwhite">And it's getting quite late</li>
                    <li class="fwhite">那只会耽误时间</li>
                </ul>
            </div>

            <!-- 布局 -->
            <div class="section" id="section-grid">
                <h2>布局</h2>
                <h3>.grid .row .cell-5-1</h3>
                <div>奇数等分，最小份为1/5</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-5-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-5-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-5-3">
                            <button class="fillblock" >3</button>
                        </div>
                        <div class="cell-5-2">
                            <button class="fillblock" >2</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-5-4">
                            <button class="fillblock" >4</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-5-5">
                            <button class="fillblock" >5</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.grid .row .cell-7-1</h3>
                <div>奇数等分，最小份为1/7</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-7-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-7-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-7-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-7-3">
                            <button class="fillblock" >3</button>
                        </div>
                        <div class="cell-7-3">
                            <button class="fillblock" >3</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-7-4">
                            <button class="fillblock" >4</button>
                        </div>
                        <div class="cell-7-3">
                            <button class="fillblock" >3</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-7-5">
                            <button class="fillblock" >5</button>
                        </div>
                        <div class="cell-7-2">
                            <button class="fillblock" >2</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-7-6">
                            <button class="fillblock" >6</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-7-7">
                            <button class="fillblock" >7</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.grid .row .cell-12-1</h3>
                <div>偶数等分，最小份为1/12</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-3">
                            <button class="fillblock" >3</button>
                        </div>
                        <div class="cell-12-3">
                            <button class="fillblock" >3</button>
                        </div>
                        <div class="cell-12-3">
                            <button class="fillblock" >3</button>
                        </div>
                        <div class="cell-12-3">
                            <button class="fillblock" >3</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-4">
                            <button class="fillblock" >4</button>
                        </div>
                        <div class="cell-12-4">
                            <button class="fillblock" >4</button>
                        </div>
                        <div class="cell-12-4">
                            <button class="fillblock" >4</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-5">
                            <button class="fillblock" >5</button>
                        </div>
                        <div class="cell-12-5">
                            <button class="fillblock" >5</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-6">
                            <button class="fillblock" >6</button>
                        </div>
                        <div class="cell-12-6">
                            <button class="fillblock" >6</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-7">
                            <button class="fillblock" >7</button>
                        </div>
                        <div class="cell-12-5">
                            <button class="fillblock" >5</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-8">
                            <button class="fillblock" >8</button>
                        </div>
                        <div class="cell-12-4">
                            <button class="fillblock" >4</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-9">
                            <button class="fillblock" >9</button>
                        </div>
                        <div class="cell-12-3">
                            <button class="fillblock" >3</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-10">
                            <button class="fillblock" >10</button>
                        </div>
                        <div class="cell-12-2">
                            <button class="fillblock" >2</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-11">
                            <button class="fillblock" >11</button>
                        </div>
                        <div class="cell-12-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-12">
                            <button class="fillblock" >12</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.grid .grid-row-full</h3>
                <div>无间隙</div>
                <br/>
                <div class="grid">
                    <div class="grid-row-full">
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                        <div class="cell-5-1">
                            <button class="fillblock" >1</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>嵌套布局</h3>
                <div>通过.row的嵌套使用，可以完美实现10列和14列的布局</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom: 10px;">
                        <div class="cell-12-6">
                            <div class="grid-row">
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                            </div>
                        </div>
                        <div class="cell-12-6">
                            <div class="grid-row">
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-5-1">
                                    <button class="fillblock" >1</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-6">
                            <div class="grid-row">
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                            </div>
                        </div>
                        <div class="cell-12-6">
                            <div class="grid-row">
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                                <div class="cell-7-1">
                                    <button class="fillblock" >1</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.grid-btngroup</h3>
                <div>参见按钮组部分文档</div>
                <br/>
            </div>

            <!-- 表格 -->
            <div class="section" id="section-table">
                <h2>表格</h2>
                <h3>.table</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:50px;">
                        <div class="cell-12-6">
                            <div style="margin-bottom:10px;">.table 默认状态</div>
                            <table class="table">
                                <tr>
                                    <th>影片名</th>
                                    <th>主演</th>
                                    <th>类型</th>
                                    <th>地区</th>
                                </tr>
                                <tr>
                                    <td>超能陆战队</td>
                                    <td>斯科特·埃德希特、瑞恩·波特</td>
                                    <td>动画</td>
                                    <td>美国</td>
                                </tr>
                                <tr>
                                    <td>超体</td>
                                    <td>斯嘉丽·约翰逊</td>
                                    <td>科幻</td>
                                    <td>美国</td>
                                </tr>
                                <tr>
                                    <td>星际穿越</td>
                                    <td>马修·麦康纳</td>
                                    <td>科幻</td>
                                    <td>美国</td>
                                </tr>
                            </table>
                        </div>
                        <div class="cell-12-6">
                            <div style="margin-bottom:10px;">使用th元素 表头样式</div>
                            <table class="table">
                                <tr>
                                    <th>影片名</th>
                                    <th>主演</th>
                                    <th>类型</th>
                                    <th>地区</th>
                                </tr>
                                <tr>
                                    <td>哆啦A梦:伴我同行</td>
                                    <td>水田山葵、大原惠美</td>
                                    <td>动画</td>
                                    <td>美国</td>
                                </tr>
                                <tr>
                                    <td>杀破狼2</td>
                                    <td>托尼·贾、吴京</td>
                                    <td>犯罪</td>
                                    <td>大陆</td>
                                </tr>
                                <tr>
                                    <td>匆匆那年</td>
                                    <td>倪妮、彭于晏</td>
                                    <td>爱情</td>
                                    <td>大陆</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:50px;">
                        <div class="cell-12-6">
                            <div style="margin-bottom:10px;">.table-line 行模式</div>
                            <div class="table-grid-border">
                                <table class="table table-line">
                                    <caption>今日热门影片</caption>
                                    <tr>
                                        <th>影片名</th>
                                        <th>主演</th>
                                        <th>类型</th>
                                        <th>地区</th>
                                    </tr>
                                    <tr>
                                        <td>夏洛特烦恼</td>
                                        <td>沈腾、马丽</td>
                                        <td>喜剧</td>
                                        <td>大陆</td>
                                    </tr>
                                    <tr>
                                        <td>西游记之大圣归来</td>
                                        <td>张磊、林子杰</td>
                                        <td>动画</td>
                                        <td>大陆</td>
                                    </tr>
                                    <tr>
                                        <td>星际穿越</td>
                                        <td>马修·麦康纳</td>
                                        <td>科幻</td>
                                        <td>美国</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="cell-12-6">
                            <div style="margin-bottom:10px;">.table-grid-border .table-grid 网格模式</div>
                            <div class="table-grid-border">
                                <table class="table table-grid">
                                    <caption>今日热门影片</caption>
                                    <thead>
                                        <tr>
                                            <th>影片名</th>
                                            <th>主演</th>
                                            <th>类型</th>
                                            <th>地区</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>超能陆战队</td>
                                            <td>斯科特·埃德希特、瑞恩·波特</td>
                                            <td>动画</td>
                                            <td>美国</td>
                                        </tr>
                                        <tr>
                                            <td>超体</td>
                                            <td>斯嘉丽·约翰逊</td>
                                            <td>科幻</td>
                                            <td>美国</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td>星际穿越</td>
                                            <td>马修·麦康纳</td>
                                            <td>科幻</td>
                                            <td>美国</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:50px;">
                        <div class="cell-12-6">
                            <div style="margin-bottom:10px;">.table-diff 奇偶行区分模式</div>
                            <table class="table table-diff">
                                <caption>今日热门影片</caption>
                                <tr>
                                    <th>影片名</th>
                                    <th>主演</th>
                                    <th>类型</th>
                                    <th>地区</th>
                                </tr>
                                <tr>
                                    <td>超能陆战队</td>
                                    <td>斯科特·埃德希特、瑞恩·波特</td>
                                    <td>动画</td>
                                    <td>美国</td>
                                </tr>
                                <tr>
                                    <td>超体</td>
                                    <td>斯嘉丽·约翰逊</td>
                                    <td>科幻</td>
                                    <td>美国</td>
                                </tr>
                                <tr>
                                    <td>星际穿越</td>
                                    <td>马修·麦康纳</td>
                                    <td>科幻</td>
                                    <td>美国</td>
                                </tr>
                            </table>
                        </div>
                        <div class="cell-12-6">
                            <div style="margin-bottom:10px;">.table-hover 鼠标指向高亮</div>
                            <table class="table table-hover">
                                <caption>今日热门影片</caption>
                                <thead>
                                    <tr>
                                        <th>影片名</th>
                                        <th>主演</th>
                                        <th>类型</th>
                                        <th>地区</th>
                                    </tr>
                                </thead>
                                <tr>
                                    <td>夏洛特烦恼</td>
                                    <td>沈腾、马丽</td>
                                    <td>喜剧</td>
                                    <td>大陆</td>
                                </tr>
                                <tr>
                                    <td>西游记之大圣归来</td>
                                    <td>张磊、林子杰</td>
                                    <td>动画</td>
                                    <td>大陆</td>
                                </tr>
                                <tr>
                                    <td>星际穿越</td>
                                    <td>马修·麦康纳</td>
                                    <td>科幻</td>
                                    <td>美国</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:50px;">
                        <div class="cell-12-12">
                            <div style="margin-bottom:10px;">.table-small 紧凑模式</div>
                            <table class="table table-grid table-small">
                                <thead>
                                    <tr>
                                        <th>影片名</th>
                                        <th>主演</th>
                                        <th>类型</th>
                                        <th>地区</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>超能陆战队</td>
                                        <td>斯科特·埃德希特、瑞恩·波特</td>
                                        <td>动画</td>
                                        <td>美国</td>
                                    </tr>
                                    <tr>
                                        <td>超体</td>
                                        <td>斯嘉丽·约翰逊</td>
                                        <td>科幻</td>
                                        <td>美国</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td>星际穿越</td>
                                        <td>马修·麦康纳</td>
                                        <td>科幻</td>
                                        <td>美国</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:50px;">
                        <div class="cell-12-12">
                            <div style="margin-bottom:10px;">.table-full 宽度100%</div>
                            <div class="table-grid-border table-full">
                                <table class="table table-grid">
                                    <caption>今日热门影片</caption>
                                    <thead>
                                        <tr>
                                            <th>影片名</th>
                                            <th>主演</th>
                                            <th>类型</th>
                                            <th>地区</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>超能陆战队</td>
                                            <td>斯科特·埃德希特、瑞恩·波特</td>
                                            <td>动画</td>
                                            <td>美国</td>
                                        </tr>
                                        <tr>
                                            <td>超体</td>
                                            <td>斯嘉丽·约翰逊</td>
                                            <td>科幻</td>
                                            <td>美国</td>
                                        </tr>
                                        <tr>
                                            <td>星际穿越</td>
                                            <td>马修·麦康纳</td>
                                            <td>科幻</td>
                                            <td>美国</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 按钮 -->
            <div class="section" id="section-btn">
                <h2>按钮</h2>
                <h3>.btn</h3>
                <div>buttn标签</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-7-1">
                            <button class="btn">default</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn">默认</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn border">边框</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn hover">激活</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn active">按下</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn loading">繁忙</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn" disabled>禁用</button>
                        </div>
                    </div>
                </div>
                <br/>

                <div>a标签</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <a class="btn">default</a>
                        </div>
                        <div class="cell-7-1">
                            <a class="btn">默认</a>
                        </div>
                        <div class="cell-7-1">
                            <a class="btn border">边框</a>
                        </div>
                        <div class="cell-7-1">
                            <a class="btn hover">激活</a>
                        </div>
                        <div class="cell-7-1">
                            <a class="btn active">按下</a>
                        </div>
                        <div class="cell-7-1">
                            <a class="btn loading">繁忙</a>
                        </div>
                        <div class="cell-7-1">
                            <a class="btn" disabled>禁用</a>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btn-inverse</h3>
                <div>反色按钮</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <button class="btn btn-inverse">inverse</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-inverse">反色</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-inverse border">边框</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-inverse hover">激活</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-inverse active">按下</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-inverse loading">繁忙</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-inverse" disabled>禁用</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btn-border</h3>
                <div>边框按钮</div>
                <br/>
                <div class="grid bgimg-dark">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <button class="btn btn-border">border</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border">默认</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border hover">激活</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border active">按下</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border loading">繁忙</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border" disabled>禁用</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btn-border-inverse</h3>
                <div>反色边框按钮</div>
                <br/>
                <div class="grid bgimg-light">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <button class="btn btn-border-inverse">inverse</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border-inverse">默认</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border-inverse hover">激活</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border-inverse active">按下</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border-inverse loading">繁忙</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-border-inverse" disabled>禁用</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btn-link</h3>
                <div>链接按钮</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <button class="btn btn-link">link</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-link">链接</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-link hover">激活</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-link active">按下</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-link loading">繁忙</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-link" disabled>禁用</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btn-theme | .btn-key | .btn-light | .btn-nice</h3>
                <div>其他风格按钮</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-1">
                            <button class="btn btn-theme">主题</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-key">关键</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-light">闪亮</button>
                        </div>
                        <div class="cell-7-1">
                            <button class="btn btn-nice">友好</button>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btn-large | .btn-small</h3>
                <div>大尺寸、小尺寸</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-7-2">
                            <a class="btn btn-large">大尺寸按钮</a>
                        </div>
                        <div class="cell-7-2">
                            <a class="btn btn-small">小尺寸按钮</a>
                        </div>
                        <div class="cell-7-1">
                        </div>
                        <div class="cell-7-1">
                        </div>
                        <div class="cell-7-1">
                        </div>
                    </div>
                </div>
                <br/>

                <h3>自定义尺寸</h3>
                <div>自定义高度后，垂直居中问题，目前只能通过line-hight来解决</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="">
                        <div class="cell-5-1">
                            <a class="btn" style="height:80px;">默认状态</a>
                        </div>
                        <div class="cell-5-1">
                            <a class="btn" style="height:80px; line-height:62px;">设置行高</a>
                        </div>
                        <div class="cell-5-1">
                            <a class="btn btn-small" style="height:80px; line-height:66px;">小尺寸按钮</a>
                        </div>
                        <div class="cell-5-1">
                            <a class="btn btn-large" style="height:80px; line-height:58px;">大尺寸按钮</a>
                        </div>
                        <div class="cell-5-1">
                        </div>
                    </div>
                </div>
                <br/>

                <h3>块级元素</h3>
                <div>宽度100%</div>
                <br/>
                <div class="grid">
                    <div class="grid-row-full">
                        <div class="cell-12-6">
                            <a class="btn btn-large btn-theme btn-full">提交</a>
                        </div>
                        <div class="cell-12-6">
                            <a class="btn btn-large btn-full">取消</a>
                        </div>
                    </div>
                    <div class="grid-row" style="">
                        <div class="cell-5-5">
                            <a class="btn btn-large btn-inverse btn-full">浏览更多</a>
                        </div>
                    </div>
                </div>
                <br/>
            </div>

            <!-- 按钮组 -->
            <div class="section" id="section-btngroup">
                <h2>按钮组</h2>
                <h3>.btngroup</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-4">
                            <div class="btngroup">
                                <button class="btn">左栏</button>
                                <button class="btn">中间</button>
                                <button class="btn">中间</button>
                                <button class="btn">右栏</button>
                            </div>
                        </div>

                        <div class="cell-12-2">&nbsp;</div>

                        <div class="cell-12-6">
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btngroup-list</h3>
                <div>.btngroup-list默认为块元素，可自定义设置宽度</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-6">
                            <div class="btngroup btngroup-list">
                                <button class="btn">顶栏</button>
                                <button class="btn">中间</button>
                                <button class="btn">中间</button>
                                <button class="btn">底栏</button>
                            </div>
                        </div>
                        <div class="cell-12-2">&nbsp;</div>
                        <div class="cell-12-4">
                            <div class="btngroup btngroup-list" style="width:160px;">
                                <button class="btn">顶栏</button>
                                <button class="btn">中间</button>
                                <button class="btn">中间</button>
                                <button class="btn">底栏</button>
                            </div>
                        </div>

                    </div>
                </div>
                <br/>

                <h3>.btngroup-table > .btn</h3>
                <div>.btn只能使用a标签</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-12">
                            <div class="btngroup btngroup-table">
                                <a class="btn" href="javascript:;">左栏</a>
                                <a class="btn" href="javascript:;">中间</a>
                                <a class="btn" href="javascript:;">右栏</a>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.btngroup-table > .btngroup > .btn</h3>
                <div>由于button标签不支持table-cell两端对齐，必须多嵌套一层.btngroup</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-12">
                            <div class="btngroup btngroup-table">
                                <div class="btngroup">
                                    <button class="btn">左栏</button>
                                </div>
                                <div class="btngroup">
                                    <button class="btn">中间</button>
                                </div>
                                <div class="btngroup">
                                    <button class="btn">右栏</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.grid-btngroup .grid-row .btn</h3>
                <div>如果嫌弃按钮间的边框无法重叠，可以使用.grid-full模拟（可是便不能根据数量动态变更，而渲染样式了）</div>
                <br/>
                <div class="grid grid-btngroup">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-4">
                            <button class="btn">左栏</button>
                        </div>
                        <div class="cell-12-4">
                            <button class="btn">中间</button>
                        </div>
                        <div class="cell-12-4">
                            <div class="btngroup">
                                <button class="btn">右栏</button>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
            </div>

            <!-- 气泡菜单 -->
            <div class="section" id="section-popmenu">
                <h2>气泡菜单</h2>
                <h3>.popmenu</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu">
                                <a class="popmenu-item" href="javascript:;">新建</a>
                                <a class="popmenu-item" href="javascript:;">打开</a>
                                <a class="popmenu-item" href="javascript:;">保存</a>
                                <div class="split"></div>
                                <a class="popmenu-item" href="javascript:;">退出</a>
                            </div>
                        </div>

                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu">
                                <div class="popmenu-item">
                                    <div class="hd"></div>
                                    <div class="md">后退</div>
                                    <div class="ft"></div>
                                </div>
                                <div class="popmenu-item">
                                    <div class="hd"></div>
                                    <div class="md">暂停</div>
                                    <div class="ft"></div>
                                </div>
                                <div class="popmenu-item selected">
                                    <div class="hd"></div>
                                    <div class="md">前进</div>
                                    <div class="ft"></div>
                                </div>
                                <div class="split"></div>
                                <div class="popmenu-item">
                                    <div class="hd"></div>
                                    <div class="md">弹出</div>
                                    <div class="ft"></div>
                                </div>
                                <div class="popmenu-item">
                                    <div class="hd"></div>
                                    <div class="md">字幕</div>
                                    <div class="ft"></div>
                                </div>
                            </div>
                        </div>

                        <div class="cell-12-4 demo-popmenuopen">
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu popmenu-selectable">
                                <div class="popmenu-item">名称排序</div>
                                <div class="popmenu-item">价格排序</div>
                                <div class="popmenu-item disabled">信用排序</div>
                                <div class="split"></div>
                                <div class="popmenu-item selected">倒序</div>
                                <div class="popmenu-item">正序</div>
                            </div>
                        </div>

                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu">
                                <div class="popmenu-item">
                                    <div class="hd">复制</div>
                                    <div class="md"></div>
                                    <div class="ft">
                                        <small>Ctrl + C</small>
                                    </div>
                                </div>
                                <div class="popmenu-item">
                                    <div class="hd">剪切</div>
                                    <div class="md"></div>
                                    <div class="ft">
                                        <small>Ctrl + X</small>
                                    </div>
                                </div>
                                <div class="popmenu-item selected">
                                    <div class="hd">粘贴</div>
                                    <div class="md"></div>
                                    <div class="ft">
                                        <small>Ctrl + V</small>
                                    </div>
                                </div>
                                <div class="split"></div>
                                <div class="popmenu-item">字体</div>
                                <div class="popmenu-item">颜色</div>
                            </div>
                        </div>

                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu">
                                <div class="popmenu-item">
                                    <div class="hd">复制</div>
                                    <div class="md"></div>
                                    <div class="ft">
                                        <label>99</label>
                                    </div>
                                </div>
                                <div class="popmenu-item">
                                    <div class="hd">剪切</div>
                                    <div class="md"></div>
                                    <div class="ft">
                                        <label>99</label>
                                    </div>
                                </div>
                                <div class="popmenu-item selected">
                                    <div class="hd">粘贴</div>
                                    <div class="md"></div>
                                    <div class="ft">
                                        <label>99</label>
                                    </div>
                                </div>
                                <div class="split"></div>
                                <div class="popmenu-item">字体</div>
                                <div class="popmenu-item">颜色</div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.popmenu-icon</h3>
                <div>自定义图标</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu popmenu-icon">
                                <a class="popmenu-item" href="javascript:;">
                                    <i class="icon iconfont icon-user-inverse"></i>
                                    <span>用户中心</span>
                                </a>
                                <a class="popmenu-item" href="javascript:;">
                                    <i class="icon iconfont icon-lock"></i>
                                    <span>修改密码</span>
                                </a>
                                <a class="popmenu-item" href="javascript:;">
                                    <span>我的收藏</span>
                                </a>
                                <div class="split"></div>
                                <a class="popmenu-item" href="javascript:;">
                                    <i class="icon iconfont icon-setting-inverse"></i>
                                    <span>设置</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>


                <h3>popmenu .popmenu-sub .popmenu-item</h3>
                <div>多级嵌套菜单，向左弹出.popmenu-tree-left，向上弹出.popmenu-tree-top，显示箭头.hassub</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-6 demo-popmenuopen">
                            <div class="popmenu popmenu-tree">
                                <div class="popmenu-item hassub">
                                    <span>市场部门</span>

                                    <div class="popmenu-sub">
                                        <div class="popmenu-item hassub">
                                            <span>部门一</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">宣传组</div>
                                                <div class="popmenu-item">策划组</div>
                                                <div class="popmenu-item">公关组</div>
                                            </div>
                                        </div>
                                        <div class="popmenu-item hassub">
                                            <span>部门二</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">宣传组</div>
                                                <div class="popmenu-item">策划组</div>
                                                <div class="popmenu-item">公关组</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="popmenu-item hassub">
                                    <span>技术部</span>

                                    <div class="popmenu-sub">
                                        <div class="popmenu-item hassub">
                                            <span>前端</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">设计组</div>
                                                <div class="popmenu-item">交互组</div>
                                                <div class="popmenu-item">程序组</div>
                                            </div>
                                        </div>
                                        <div class="popmenu-item hassub">
                                            <span>后端</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">架构</div>
                                                <div class="popmenu-item">业务组</div>
                                                <div class="popmenu-item">数据组</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="popmenu-item disabled">财务部</div>
                                <div class="split"></div>
                                <div class="popmenu-item">秘书处</div>
                                <div class="popmenu-item">总经办</div>
                            </div>
                        </div>

                        <div class="cell-12-6 demo-popmenuopen">
                            <div class="popmenu popmenu-tree-left popmenu-tree-top">
                                <div class="popmenu-item hassub">
                                    <span>市场部门</span>

                                    <div class="popmenu-sub">
                                        <div class="popmenu-item hassub">
                                            <span>部门一</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">宣传组</div>
                                                <div class="popmenu-item">策划组</div>
                                                <div class="popmenu-item">公关组</div>
                                            </div>
                                        </div>
                                        <div class="popmenu-item hassub">
                                            <span>部门二</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">宣传组</div>
                                                <div class="popmenu-item">策划组</div>
                                                <div class="popmenu-item">公关组</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="popmenu-item hassub">
                                    <span>技术部</span>

                                    <div class="popmenu-sub">
                                        <div class="popmenu-item hassub">
                                            <span>前端</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">设计组</div>
                                                <div class="popmenu-item">交互组</div>
                                                <div class="popmenu-item">程序组</div>
                                            </div>
                                        </div>
                                        <div class="popmenu-item hassub">
                                            <span>后端</span>

                                            <div class="popmenu-sub">
                                                <div class="popmenu-item">架构</div>
                                                <div class="popmenu-item">业务组</div>
                                                <div class="popmenu-item">数据组</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="popmenu-item disabled">财务部</div>
                                <div class="split"></div>
                                <div class="popmenu-item">秘书处</div>
                                <div class="popmenu-item">总经办</div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.popmenu-large | .popmenu-small</h3>
                <div>大尺寸、小尺寸</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu popmenu-small">
                                <a class="popmenu-item" href="javascript:;">新建</a>
                                <a class="popmenu-item" href="javascript:;">打开</a>
                                <a class="popmenu-item" href="javascript:;">保存</a>
                                <div class="split"></div>
                                <a class="popmenu-item" href="javascript:;">退出</a>
                            </div>
                        </div>

                        <div class="cell-12-4 demo-popmenuopen">
                            <div class="popmenu popmenu-large">
                                <a class="popmenu-item" href="javascript:;">新建</a>
                                <a class="popmenu-item" href="javascript:;">打开</a>
                                <a class="popmenu-item" href="javascript:;">保存</a>
                                <div class="split"></div>
                                <a class="popmenu-item" href="javascript:;">退出</a>
                            </div>
                        </div>

                        <div class="cell-12-4 demo-popmenuopen">
                        </div>
                    </div>

                </div>
                <br/>

                <h3>.btngroup .btn-popmenu .popmenu</h3>
                <div>弹出菜单按钮组，.popmenu必须放在.btngroup子元素的最后</div>
                <br/>
                <div class="grid">
                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-5-1 demo-popmenuopen">
                            <div class="btngroup">
                                <button class="btn btn-popmenu">
                                    <span>默认</span> <i class="iconfont icon-down-min"></i>
                                </button>

                                <div class="popmenu active">
                                    <a class="popmenu-item" href="javascript:;">新建</a>
                                    <a class="popmenu-item" href="javascript:;">打开</a>
                                    <a class="popmenu-item" href="javascript:;">保存</a>
                                    <div class="split"></div>
                                    <a class="popmenu-item" href="javascript:;">退出</a>
                                </div>
                            </div>
                        </div>

                        <div class="cell-5-1">
                            <div class="btngroup">
                                <button class="btn btn-popmenu active">
                                    <span>激活</span>
                                    <i class="iconfont icon-down-min"></i>
                                </button>

                                <div class="popmenu active">
                                    <a class="popmenu-item" href="javascript:;">新建</a>
                                    <a class="popmenu-item" href="javascript:;">打开</a>
                                    <a class="popmenu-item" href="javascript:;">保存</a>
                                    <div class="split"></div>
                                    <a class="popmenu-item" href="javascript:;">退出</a>
                                </div>
                            </div>
                        </div>

                        <div class="cell-5-1">
                            <div class="btngroup">
                                <button class="btn btn-popmenu-icon active">
                                    <i class="iconfont icon-down-min"></i>
                                </button>
                                <button class="btn">提交</button>

                                <div class="popmenu active">
                                    <a class="popmenu-item" href="javascript:;">新建</a>
                                    <a class="popmenu-item" href="javascript:;">打开</a>
                                    <a class="popmenu-item" href="javascript:;">保存</a>
                                    <div class="split"></div>
                                    <a class="popmenu-item" href="javascript:;">退出</a>
                                </div>
                            </div>
                        </div>

                        <div class="cell-5-1">
                            <div class="btngroup">
                                <button class="btn">提交</button>
                                <button class="btn btn-popmenu-icon btn-popmenu-left btn-popmenu-top active">
                                    <i class="iconfont icon-up-min"></i>
                                </button>

                                <div class="popmenu active">
                                    <a class="popmenu-item" href="javascript:;">新建</a>
                                    <a class="popmenu-item" href="javascript:;">打开</a>
                                    <a class="popmenu-item" href="javascript:;">保存</a>
                                    <div class="split"></div>
                                    <a class="popmenu-item" href="javascript:;">退出</a>
                                </div>
                            </div>
                        </div>

                        <div class="cell-5-1">
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:5px;">
                        <div class="cell-12-6 demo-popmenuopen">
                            <div class="btngroup btngroup-full">
                                <button class="btn btn-full btn-popmenu active">
                                    <span>自适应按钮组100%宽度</span> <i class="iconfont icon-down-min"></i>
                                </button>

                                <div class="popmenu popmenu-full active">
                                    <a class="popmenu-item" href="javascript:;">新建</a>
                                    <a class="popmenu-item" href="javascript:;">打开</a>
                                    <a class="popmenu-item" href="javascript:;">保存</a>
                                    <div class="split"></div>
                                    <a class="popmenu-item" href="javascript:;">退出</a>
                                </div>
                            </div>
                        </div>

                        <div class="cell-12-6 demo-popmenuopen">
                            <div class="btngroup">
                                <button class="btn btn-popmenu active">
                                    <span>内容居中</span> <i class="iconfont icon-down-min"></i>
                                </button>

                                <div class="popmenu popmenu-full active">
                                    <div class="popmenu-item">
                                        <div class="hd"></div>
                                        <div class="md">后退</div>
                                        <div class="ft"></div>
                                    </div>
                                    <div class="popmenu-item">
                                        <div class="hd"></div>
                                        <div class="md">暂停</div>
                                        <div class="ft"></div>
                                    </div>
                                    <div class="popmenu-item">
                                        <div class="hd"></div>
                                        <div class="md">前进</div>
                                        <div class="ft"></div>
                                    </div>
                                    <div class="split"></div>
                                    <div class="popmenu-item">
                                        <div class="hd"></div>
                                        <div class="md">弹出</div>
                                        <div class="ft"></div>
                                    </div>
                                    <div class="popmenu-item">
                                        <div class="hd"></div>
                                        <div class="md">字幕</div>
                                        <div class="ft"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <br/>
            </div>

            <!-- 单选、复选 -->
            <div class="section" id="section-chkradio">
                <h2>单选、复选</h2>
                <h3>.checkbox .radiobox</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-2">
                            <label class="checkbox">
                                <input type="checkbox" name="group1" value="1"/>
                                <span class="checkbox-text">默认</span>
                            </label>
                        </div>
                        <div class="cell-12-2">
                            <label class="checkbox hover">
                                <input type="checkbox" name="group1" value="2"/>
                                <span class="checkbox-text">激活</span>
                            </label>
                        </div>
                        <div class="cell-12-2">
                            <label class="checkbox checked">
                                <input type="checkbox" name="group1" value="3"/>
                                <span class="checkbox-text">选中</span>
                            </label>
                        </div>
                        <div class="cell-12-2">
                            <label class="checkbox disabled">
                                <input type="checkbox" name="group1" value="4"/>
                                <span class="checkbox-text">禁用</span>
                            </label>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:30px;">
                        <div class="cell-12-2">
                            <label class="radio">
                                <input type="radio" name="group2" value="1"/>
                                <span class="radio-text">默认</span>
                            </label>
                        </div>
                        <div class="cell-12-2">
                            <label class="radio hover">
                                <input type="radio" name="group2" value="2"/>
                                <span class="radio-text">激活</span>
                            </label>
                        </div>
                        <div class="cell-12-2">
                            <label class="radio checked">
                                <input type="radio" name="group2" value="3"/>
                                <span class="radio-text">选中</span>
                            </label>
                        </div>
                        <div class="cell-12-2">
                            <label class="radio disabled">
                                <input type="radio" name="group2" value="4"/>
                                <span class="radio-text">禁用</span>
                            </label>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:30px;">
                        <div class="cell-12-6">
                            <label class="checkbox">
                                <input type="checkbox" name="group3" value="1"/>
                                <span class="checkbox-text">煎饼</span>
                            </label>
                            <label class="checkbox checked">
                                <input type="checkbox" name="group3" value="2"/>
                                <span class="checkbox-text">烧饼</span>
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="group3" value="3"/>
                                <span class="checkbox-text">炊饼</span>
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="group3" value="4"/>
                                <span class="checkbox-text">铁饼</span>
                            </label>
                        </div>
                        <div class="cell-12-6">
                            <label class="radio">
                                <input type="radio" name="group4" value="1"/>
                                <span class="radio-text">胖子</span>
                            </label>
                            <label class="radio">
                                <input type="radio" name="group4" value="2"/>
                                <span class="radio-text">老子</span>
                            </label>
                            <label class="radio checked">
                                <input type="radio" name="group4" value="3"/>
                                <span class="radio-text">腰子</span>
                            </label>
                            <label class="radio">
                                <input type="radio" name="group4" value="4"/>
                                <span class="radio-text">鬼子</span>
                            </label>
                        </div>
                    </div>

                    <div class="grid-row" style="margin-bottom:30px;">
                        <div class="cell-12-6">
                            <label class="checkbox checkbox-full">
                                <input type="checkbox" name="group3" value="1"/>
                                <span class="checkbox-text">煎饼</span>
                            </label>
                            <label class="checkbox checkbox-full checked">
                                <input type="checkbox" name="group3" value="2"/>
                                <span class="checkbox-text">烧饼</span>
                            </label>
                            <label class="checkbox checkbox-full">
                                <input type="checkbox" name="group3" value="3"/>
                                <span class="checkbox-text">炊饼</span>
                            </label>
                            <label class="checkbox checkbox-full">
                                <input type="checkbox" name="group3" value="4"/>
                                <span class="checkbox-text">铁饼</span>
                            </label>
                        </div>
                        <div class="cell-12-6">
                            <label class="radio radio-full">
                                <input type="radio" name="group4" value="1"/>
                                <span class="radio-text">胖子</span>
                            </label>
                            <label class="radio radio-full">
                                <input type="radio" name="group4" value="2"/>
                                <span class="radio-text">老子</span>
                            </label>
                            <label class="radio radio-full checked">
                                <input type="radio" name="group4" value="3"/>
                                <span class="radio-text">腰子</span>
                            </label>
                            <label class="radio radio-full">
                                <input type="radio" name="group4" value="4"/>
                                <span class="radio-text">鬼子</span>
                            </label>
                        </div>
                    </div>

                </div>
                <br/>

                <h3>.checkbox-theme .radio-theme | *-key  | *-light  | *-nice </h3>
                <div>其他风格按钮</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-1">
                            <label class="checkbox checkbox-theme">
                                <input type="checkbox" name="group1" value="1"/>
                                <span class="checkbox-text">主题</span>
                            </label>
                            <label class="checkbox checkbox-theme hover">
                                <input type="checkbox" name="group1" value="1"/>
                                <span class="checkbox-text">激活</span>
                            </label>
                            <label class="checkbox checkbox-theme checked">
                                <input type="checkbox" name="group1" value="1"/>
                                <span class="checkbox-text">选中</span>
                            </label>
                            <label class="checkbox checkbox-theme disabled">
                                <input type="checkbox" name="group1" value="1"/>
                                <span class="checkbox-text">禁用</span>
                            </label>
                        </div>
                        <div class="cell-12-1">
                            <label class="checkbox checkbox-key">
                                <input type="checkbox" name="group1" value="2"/>
                                <span class="checkbox-text">关键</span>
                            </label>
                            <label class="checkbox checkbox-key hover">
                                <input type="checkbox" name="group1" value="2"/>
                                <span class="checkbox-text">激活</span>
                            </label>
                            <label class="checkbox checkbox-key checked">
                                <input type="checkbox" name="group1" value="2"/>
                                <span class="checkbox-text">选中</span>
                            </label>
                            <label class="checkbox checkbox-key disabled">
                                <input type="checkbox" name="group1" value="2"/>
                                <span class="checkbox-text">禁用</span>
                            </label>
                        </div>
                        <div class="cell-12-1">
                            <label class="checkbox checkbox-light">
                                <input type="checkbox" name="group1" value="3"/>
                                <span class="checkbox-text">闪亮</span>
                            </label>
                            <label class="checkbox checkbox-light hover">
                                <input type="checkbox" name="group1" value="3"/>
                                <span class="checkbox-text">激活</span>
                            </label>
                            <label class="checkbox checkbox-light checked">
                                <input type="checkbox" name="group1" value="3"/>
                                <span class="checkbox-text">选中</span>
                            </label>
                            <label class="checkbox checkbox-light disabled">
                                <input type="checkbox" name="group1" value="3"/>
                                <span class="checkbox-text">禁用</span>
                            </label>
                        </div>
                        <div class="cell-12-1">
                            <label class="checkbox checkbox-nice">
                                <input type="checkbox" name="group1" value="4"/>
                                <span class="checkbox-text">友好</span>
                            </label>
                            <label class="checkbox checkbox-nice hover">
                                <input type="checkbox" name="group1" value="4"/>
                                <span class="checkbox-text">激活</span>
                            </label>
                            <label class="checkbox checkbox-nice checked">
                                <input type="checkbox" name="group1" value="4"/>
                                <span class="checkbox-text">选中</span>
                            </label>
                            <label class="checkbox checkbox-nice disabled">
                                <input type="checkbox" name="group1" value="4"/>
                                <span class="checkbox-text">禁用</span>
                            </label>
                        </div>
                    </div>
                    <br/>

                    <div class="grid-row">
                        <div class="cell-12-1">
                            <label class="radio radio-theme">
                                <input type="radio" name="group1" value="1"/>
                                <span class="radio-text">主题</span>
                            </label>
                            <label class="radio radio-theme hover">
                                <input type="radio" name="group1" value="1"/>
                                <span class="radio-text">激活</span>
                            </label>
                            <label class="radio radio-theme checked">
                                <input type="radio" name="group1" value="1"/>
                                <span class="radio-text">选中</span>
                            </label>
                            <label class="radio radio-theme disabled">
                                <input type="radio" name="group1" value="1"/>
                                <span class="radio-text">禁用</span>
                            </label>
                        </div>
                        <div class="cell-12-1">
                            <label class="radio radio-key">
                                <input type="radio" name="group1" value="2"/>
                                <span class="radio-text">关键</span>
                            </label>
                            <label class="radio radio-key hover">
                                <input type="radio" name="group1" value="2"/>
                                <span class="radio-text">激活</span>
                            </label>
                            <label class="radio radio-key checked">
                                <input type="radio" name="group1" value="2"/>
                                <span class="radio-text">选中</span>
                            </label>
                            <label class="radio radio-key disabled">
                                <input type="radio" name="group1" value="2"/>
                                <span class="radio-text">禁用</span>
                            </label>
                        </div>
                        <div class="cell-12-1">
                            <label class="radio radio-light">
                                <input type="radio" name="group1" value="3"/>
                                <span class="radio-text">闪亮</span>
                            </label>
                            <label class="radio radio-light hover">
                                <input type="radio" name="group1" value="3"/>
                                <span class="radio-text">激活</span>
                            </label>
                            <label class="radio radio-light checked">
                                <input type="radio" name="group1" value="3"/>
                                <span class="radio-text">选中</span>
                            </label>
                            <label class="radio radio-light disabled">
                                <input type="radio" name="group1" value="3"/>
                                <span class="radio-text">禁用</span>
                            </label>
                        </div>
                        <div class="cell-12-1">
                            <label class="radio radio-nice">
                                <input type="radio" name="group1" value="4"/>
                                <span class="radio-text">友好</span>
                            </label>
                            <label class="radio radio-nice hover">
                                <input type="radio" name="group1" value="4"/>
                                <span class="radio-text">激活</span>
                            </label>
                            <label class="radio radio-nice checked">
                                <input type="radio" name="group1" value="4"/>
                                <span class="radio-text">选中</span>
                            </label>
                            <label class="radio radio-nice disabled">
                                <input type="radio" name="group1" value="4"/>
                                <span class="radio-text">禁用</span>
                            </label>
                        </div>
                    </div>
                </div>
                <br/>
            </div>

            <!-- 下拉框 -->
            <div class="section" id="section-select">
                <h2>下拉框</h2>
                <h3>.select</h3>
                <div></div>
                <br/>
                <div class="grid" style="margin:150px 0px 350px;">
                    <div class="grid-row">
                        <div class="cell-12-2">
                            <div class="select">
                                <div class="select-box">
                                    <input class="select-text" disabled type="text" placeholder="请选择" value="" />
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell-12-2">
                            <div class="select active">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京"  readonly/>
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item disabled" value="shanghai">上海</li>
                                    <li class="split"></li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item disabled" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell-12-2">
                            <div class="select active">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="上海"/>
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京北京北京北京北京北京北京北京</li>
                                    <li class="select-item selected" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell-12-2">
                            <div class="select active top">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="上海"/>
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item selected" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <h3>.select-large | .select-small</h3>
                <div>大尺寸、小尺寸</div>
                <br/>
                <div class="grid" style="margin-bottom: 150px;">
                    <div class="grid-row">
                        <div class="cell-12-4">
                            <button class="btn btn-small">参照按钮</button>
                            <div class="select select-small active">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="" />
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <button class="btn">参照按钮</button>
                            <div class="select active">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="" />
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <button class="btn btn-large">参照按钮</button>
                            <div class="select select-large active">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="北京" readonly />
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <h3>块级元素</h3>
                <div>宽度100%</div>
                <br/>
                <div class="grid">
                    <div class="grid-row-full">
                        <div class="cell-12-6">
                            <a class="btn btn-large btn-theme btn-full">提交</a>
                        </div>
                        <div class="cell-12-6">
                            <div class="select select-large select-full select-center top">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="北京" readonly />
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="grid-row" style="margin-bottom:200px;">
                        <div class="cell-5-5">
                            <div class="select select-large select-full active">
                                <div class="select-box">
                                    <input class="select-text" type="text" placeholder="请选择" value="北京" readonly />
                                </div>
                                <ul class="select-list">
                                    <li class="select-item" value="beijing">北京</li>
                                    <li class="select-item" value="shanghai">上海</li>
                                    <li class="select-item" value="guangzhou">广州</li>
                                    <li class="select-item" value="shenzhen">深圳</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 标签页 -->
            <div class="section" id="section-tabs">
                <h2>标签页</h2>
                <h3>.tabs</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6">
                            <div class="tabs">
                                <ul class="tabs-navs">
                                    <li class="tabs-nav">参数</li>
                                    <li class="tabs-nav active">详情</li>
                                    <li class="tabs-nav">评论</li>
                                    <li class="tabs-nav">图册</li>
                                    <li class="tabs-nav">更多 <i class="iconfont icon-right-min"></i></li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
                <br/>

                <h3>.tabs.tabs-small</h3>
                <div>小尺寸</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6">
                            <div class="tabs tabs-small">
                                <ul class="tabs-navs">
                                    <li class="tabs-nav active">红色</li>
                                    <li class="tabs-nav">蓝色</li>
                                    <li class="tabs-nav">黑色</li>
                                    <li class="tabs-nav">其他 <i class="iconfont icon-right-min"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.tabs .tabs-nav-popmenu .popmenu</h3>
                <div>弹出气泡菜单</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6 demo-popmenuopen">
                            <div class="tabs tabs-small">
                                <ul class="tabs-navs">
                                    <li class="tabs-nav">首页</li>
                                    <li class="tabs-nav">基本信息</li>
                                    <li class="tabs-nav">详情</li>
                                    <li class="tabs-nav tabs-nav-popmenu active">
                                        <span>更多</span>
                                        <div class="popmenu active">
                                            <a class="popmenu-item" href="javascript:;">新建</a>
                                            <a class="popmenu-item" href="javascript:;">打开</a>
                                            <a class="popmenu-item" href="javascript:;">保存</a>
                                            <div class="split"></div>
                                            <a class="popmenu-item" href="javascript:;">退出</a>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
            </div>

            <!-- 标签 -->
            <div class="section" id="section-tag">
                <h2>标签</h2>
                <h3>.tag</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-5-5">
                            <p class="fsize-32">
                                据说这是一份最好吃的中国披萨 <span class="tag">煎饼果子</span>
                            </p>
                            <p class="fsize-26">
                                据说这是一份最好吃的中国披萨 <span class="tag">煎饼果子</span>
                            </p>
                            <p class="fsize-18">
                                据说这是一份最好吃的中国披萨 <span class="tag">煎饼果子</span>
                            </p>
                            <p class="fsize-14">
                                据说这是一份最好吃的中国披萨 <span class="tag">煎饼果子</span>
                            </p>
                            <p class="fsize-12">
                                据说这是一份最好吃的中国披萨 <span class="tag">煎饼果子</span>
                            </p>
                        </div>

                    </div>
                </div>
                <br/>

                <h3>.tag-theme | .tag-key | .tag-light | .tag-nice  | .tag-black </h3>
                <div>其他风格</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-5-5">
                            <p class="fsize-14">
                                <span class="tag tag-theme">香菜</span>
                                <span class="tag tag-key">火腿</span>
                                <span class="tag tag-light">煎鸡蛋</span>
                                <span class="tag tag-nice">生菜</span>
                                <span class="tag tag-black">胡萝卜</span>
                            </p>
                        </div>

                    </div>
                </div>
                <br/>

                <h3>.tag-circle </h3>
                <div>椭圆</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-5-5">
                            <p class="fsize-14">
                                <span class="tag tag-circle tag-theme">套餐一</span>
                                <span class="tag tag-circle tag-key">套餐二</span>
                                <span class="tag tag-circle tag-light">套餐三</span>
                                <span class="tag tag-circle tag-nice">套餐四</span>
                                <span class="tag tag-circle tag-black">9</span>
                                <span class="tag tag-circle">63</span>
                            </p>
                        </div>

                    </div>
                </div>
                <br/>
            </div>

            <!-- 输入框 -->
            <div class="section" id="section-input">
                <h2>输入框</h2>
                <h3>.input | .textarea</h3>
                <div>默认样式（HTML5新类型各个浏览器支持程度不同）。</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-5-1">
                            <input type="text" class="input" value="default" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            <input type="text" class="input" value="默认" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            <input type="text" class="input active" value="激活" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            <input type="text" class="input" value="只读" placeholder="请输入" readonly/>
                        </div>
                        <div class="cell-5-1">
                            <input type="text" class="input" value="禁用" placeholder="请输入" disabled/>
                        </div>
                    </div>
                    <br/>
                    <div class="grid-row">
                        <div class="cell-5-1">
                            <textarea class="textarea" placeholder="请输入">default</textarea>
                        </div>
                        <div class="cell-5-1">
                            <textarea class="textarea" placeholder="请输入">默认</textarea>
                        </div>
                        <div class="cell-5-1">
                            <textarea class="textarea active" placeholder="请输入">激活</textarea>
                        </div>
                        <div class="cell-5-1">
                            <textarea class="textarea" placeholder="请输入" readonly>只读</textarea>
                        </div>
                        <div class="cell-5-1">
                            <textarea class="textarea" placeholder="请输入" disabled>禁用</textarea>
                        </div>
                    </div>
                    <!-- <div class="grid-row">
                        <div class="cell-5-1">
                            text：<input type="text" class="input" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            password：<input type="password" class="input" value="" placeholder="请输入密码"/>
                        </div>
                        <div class="cell-5-1">
                            number：<input type="number" class="input" value="" placeholder="数值"/>
                        </div>
                        <div class="cell-5-1">
                            search：<input type="search" class="input" value="" placeholder="搜索关键字"/>
                        </div>
                        <div class="cell-5-1">
                            email：<input type="email" class="input" value="" placeholder="邮件地址"/>
                        </div>
                    </div>
                    <div class="grid-row">
                        <div class="cell-5-1">
                            month：<input type="month" class="input" value="" placeholder="月份"/>
                        </div>
                        <div class="cell-5-1">
                            date：<input type="date" class="input" value="" placeholder="日期"/>
                        </div>
                        <div class="cell-5-1">
                            time：<input type="time" class="input" value="" placeholder="时间"/>
                        </div>
                        <div class="cell-5-1">
                            week：<input type="week" class="input" value="" placeholder="第几周"/>
                        </div>
                        <div class="cell-5-1">
                            url：<input type="url" class="input" value="" placeholder="网址"/>
                        </div>
                    </div> -->
                </div>
                <br/>

                <h3>.input-theme | .input-key | .input-light | .input-nice</h3>
                <div>其他风格输入框</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-5-1">
                            theme：<input type="text" class="input input-theme" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            key：<input type="text" class="input input-key" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            light：<input type="text" class="input input-light" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            nice：<input type="text" class="input input-nice" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-5-1">
                            active：<input type="text" class="input input-theme active" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            active：<input type="text" class="input input-key active" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            active：<input type="text" class="input input-light active" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                            active：<input type="text" class="input input-nice active" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-5-1">
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.input-small | .input-large</h3>
                <div>大尺寸、小尺寸</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-4">
                            <button class="btn btn-small">参照按钮</button>
                            <input type="text" class="input input-small" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-12-4">
                            <button class="btn">参照按钮</button>
                            <input type="text" class="input" value="" placeholder="请输入"/>
                        </div>
                        <div class="cell-12-4">
                            <button class="btn btn-large">参照按钮</button>
                            <input type="text" class="input input-large" value="" placeholder="请输入"/>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.input-full</h3>
                <div>宽度100%</div>
                <br/>
                <div class="grid">
                    <!-- <div class="grid-row">
                        <div class="cell-12-12">
                            <input type="text" class="input input-small input-full" value="" placeholder="请输入"/>
                        </div>
                    </div> -->
                    <div class="grid-row">
                        <div class="cell-12-12">
                            <input type="text" class="input input-theme input-full" value="" placeholder="请输入"/>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 组合输入框 -->
            <div class="section" id="section-inputgroup">
                <h2>组合输入框</h2>
                <h3>.inputgroup .addons .text</h3>
                <div>组合输入框</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <div class="addons">
                                    <span class="text">￥</span>
                                </div>
                                <input type="number" class="input" value="" placeholder="数值"/>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <input type="number" class="input" value="" placeholder="数值"/>
                                <div class="addons">
                                    <span class="text">元</span>
                                </div>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <input type="number" class="input" value="" placeholder="数值"/>
                                <div class="addons">
                                    <span class="text">元</span>
                                    <span class="text">（人民币）</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid-row">
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <div class="addons">
                                    <button class="btn border">搜索</button>
                                </div>
                                <input type="text" class="input" value="" placeholder="搜索关键字"/>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <input type="text" class="input" value="" placeholder="搜索关键字"/>
                                <div class="addons">
                                    <button class="btn border">搜索</button>
                                </div>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <input type="text" class="input active" value="" placeholder="搜索关键字"/>
                                <div class="addons">
                                    <button class="btn border">搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>大尺寸、小尺寸</h3>
                <div>*-small | *-large</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <input type="number" class="input input-small" value="" placeholder="数值"/>
                                <div class="addons">
                                    <span class="text text-small">元</span>
                                </div>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <div class="addons">
                                    <span class="text">￥</span>
                                </div>
                                <input type="number" class="input" value="" placeholder="数值"/>
                            </div>
                        </div>
                        <div class="cell-12-4">
                            <div class="inputgroup">
                                <input type="number" class="input input-large" value="" placeholder="数值"/>
                                <div class="addons">
                                    <span class="text text-large">元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>自定义宽度</h3>
                <div>设置.inputgroup元素的宽度</div>
                <br/>
                <div class="grid">
                    <div class="grid-row bgimg-light">
                        <div class="cell-12-12">
                            <div class="inputgroup" style="width:528px">
                                <div class="addons">
                                    <button class="btn btn-theme border">搜索</button>
                                    <button class="btn btn-theme border" style="padding:8px 3px;"><i class="iconfont icon-down-min"></i></button>
                                </div>
                                <input type="text" class="input input-theme active" value="" placeholder="搜索关键字"/>
                            </div>
                            <div class="inputgroup" style="width:200px">
                                <input type="text" class="input input-key active" value="" placeholder="搜索关键字"/>
                                <div class="addons">
                                    <button class="btn btn-key border">选择</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.inputgroup-full</h3>
                <div>宽度100%</div>
                <br/>
                <div class="grid">
                    <!-- <div class="grid-row">
                        <div class="cell-12-12">
                            <div class="inputgroup inputgroup-full">
                                <input type="text" class="input" value="" placeholder="搜索关键字"/>
                                <div class="addons">
                                    <button class="btn border">搜索</button>
                                    <button class="btn border">其他</button>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="grid-row bgimg-light">
                        <div class="cell-12-12">
                            <div class="inputgroup inputgroup-full">
                                <input type="text" class="input input-nice active" value="" placeholder="搜索关键字"/>
                                <div class="addons">
                                    <button class="btn btn-nice border">搜索</button>
                                    <button class="btn btn-nice border">其他</button>
                                    <button class="btn btn-nice border" style="padding:8px 3px;"><i class="iconfont icon-down-min"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="grid-row">
                        <div class="cell-12-12">
                            <div class="inputgroup inputgroup-full">
                                <div class="addons">
                                    <button class="btn btn-theme btn-large border"><i class="iconfont icon-search"></i> 搜索</button>
                                </div>
                                <input type="text" class="input input-theme input-large active" value="" placeholder="搜索关键字"/>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>

            <!-- 表单 -->
            <div class="section" id="section-form">
                <h2>表单</h2>
                <h3>.form .formitem</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6">
                            <form class="form" action="" method="post" novalidate="novalidate">
                                <div class="formitem">
                                    <label class="label">账号 <i class="must"></i></label>
                                    <input type="text" class="input" value="" placeholder="邮箱或手机"/>
                                </div>
                                <div class="formitem">
                                    <label class="label">密码 <i class="must"></i></label>
                                    <input type="text" class="input" value="" placeholder="登录密码"/>
                                    <small>忘记密码，可以联系客服咨询。</small>
                                </div>
                                <div class="formitem">
                                    <label class="label">&nbsp;</label>
                                    <label class="checkbox">
                                        <input type="checkbox" id="autologin" name="autologin" value="1" />
                                        <span class="checkbox-text">30天免登录</span>
                                    </label>
                                </div>
                                <div class="formitem">
                                    <label class="label">&nbsp;</label>
                                    <button type="submit" class="btn btn-theme">立即登录</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <br/>

                <h3>.form .formsub .formitem</h3>
                <div>字段分组</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6">
                            <form class="form" action="" method="post" novalidate="novalidate">
                                <div class="formsub">
                                    <div class="formitem">
                                        <label class="label">用户名 <i class="must"></i></label>
                                        <input type="text" class="input" value="" placeholder="昵称"/>
                                    </div>
                                    <div class="formitem">
                                        <label class="label">电话 <i class="must"></i></label>
                                        <input type="number" class="input" value="" placeholder="手机号码"/>
                                    </div>
                                </div>
                                <div class="formsub">
                                    <div class="formitem">
                                        <label class="label">性别</label>
                                        <label class="radio checked">
                                            <input type="radio" id="formgender1" name="formgender" value="man" checked/>
                                            <span class="radio-text">男</span>
                                        </label>
                                        <label class="radio">
                                            <input type="radio" id="formgender2" name="formgender" value="woman" />
                                            <span class="radio-text">女</span>
                                        </label>
                                    </div>
                                    <div class="formitem">
                                        <label class="label">所在地区</label>
                                        <div class="select" style="margin-right:10px;">
                                            <div class="select-box">
                                                <input class="select-text" type="text" placeholder="省份" value="" />
                                            </div>
                                            <ul class="select-list">
                                                <li class="select-item" value="beijing">北京</li>
                                                <li class="select-item" value="shanghai">四川</li>
                                                <li class="select-item" value="guangzhou">浙江</li>
                                                <li class="select-item" value="shenzhen">内蒙古</li>
                                            </ul>
                                        </div>
                                        <div class="select">
                                            <div class="select-box">
                                                <input class="select-text" type="text" placeholder="城市" value="" />
                                            </div>
                                            <ul class="select-list">
                                                <li class="select-item" value="beijing">北京</li>
                                                <li class="select-item" value="shanghai">上海</li>
                                                <li class="select-item" value="guangzhou">广州</li>
                                                <li class="select-item" value="shenzhen">深圳</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="formitem">
                                        <label class="label">个人简介</label>
                                        <textarea class="textarea textarea-full" placeholder="个人资料"></textarea>
                                    </div>
                                </div>
                                <div class="formsub">
                                    <div class="formitem">
                                        <label class="label">&nbsp;</label>
                                        <button type="submit" class="btn btn-theme" style="margin-right:5px;">保存</button>
                                        <button type="button" class="btn">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <br/>

                <h3>.form .formitem-line</h3>
                <div>行模式</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-8">
                            <form class="form" action="" method="post" novalidate="novalidate">
                                <div class="formsub">
                                    <div class="formitem-line">
                                        <label class="label">账号 <i class="must"></i></label>
                                        <input type="text" class="input input-full" value="" placeholder="邮箱或手机"/>
                                    </div>
                                    <div class="formitem-line">
                                        <label class="label">旧密码 <i class="must"></i></label>
                                        <input type="text" class="input input-full" value="" placeholder="登录密码"/>
                                        <small>忘记密码，可以联系客服咨询。</small>
                                    </div>
                                </div>

                                <div class="formsub">
                                    <div class="formitem-line">
                                        <label class="label">新密码 <i class="must"></i></label>
                                        <input type="text" class="input input-full" value="" placeholder="6~30位数字、字母或特殊符号"/>
                                    </div>
                                    <div class="formitem-line">
                                        <label class="label">确认密码 <i class="must"></i></label>
                                        <input type="text" class="input input-full" value="" placeholder="再次输入新密码"/>
                                    </div>
                                </div>
                                <div class="formsub">
                                    <div class="formitem-line">
                                        <label class="checkbox checkbox-full">
                                            <input type="checkbox" id="autologin" name="autologin" value="1" />
                                            <span class="checkbox-text">同意《账号安全管理协议》条款</span>
                                        </label>
                                    </div>
                                    <div class="formitem-line">
                                        <button type="submit" class="btn btn-theme" style="margin-right:5px;">确定提交</button>
                                        <button type="button" class="btn">取消</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 遮罩层 -->
            <div class="section" id="section-mask">
                <h2>遮罩层</h2>
                <h3>.mask</h3>
                <div></div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6">
                            <div class="mask hide"></div>

                        </div>
                    </div>
                </div>
                <br/>
            </div>

            <!-- 对话框 -->
            <div class="section" id="section-dlg">
                <h2>对话框</h2>
                <h3>.dlg</h3>
                <div>由于主张简洁统一的交互语言，这里的对话框都是模态。（如果需要非模态对话框，可以自己写一个，其实也很简单）</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-6 demo-dlg">
                            <div class="dlg">
                                <div class="mask"></div>
                                <div class="dlg-container">
                                    <div class="dlg-head">
                                        <div class="dlg-title">对话框标题</div>
                                        <button class="dlg-close"></button>
                                    </div>
                                    <div class="dlg-body">
                                        这里是内容区...
                                    </div>
                                    <div class="dlg-foot">
                                        <div class="fright">
                                            <button class="btn">取消</button>
                                            <button class="btn">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="cell-12-6 demo-dlg">
                            <div class="dlg dlg-nomask">
                                <div class="mask"></div>
                                <div class="dlg-container">
                                    <div class="dlg-head">
                                        <div class="dlg-title">对话框标题</div>
                                        <button class="dlg-close"></button>
                                    </div>
                                    <div class="dlg-body">
                                        这里是内容区...
                                    </div>
                                    <div class="dlg-foot">
                                        <div class="fright">
                                            <button class="btn">取消</button>
                                            <button class="btn">上传</button>
                                            <button class="btn btn-theme">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>


                <h3>.dlg-alert | .dlg-confirm | .dlg-prompt</h3>
                <div>提示框、确认框、输入框</div>
                <br/>
                <div class="grid">
                    <div class="grid-row-full">
                        <div class="cell-12-6 demo-dlg">
                            <div class="dlg dlg-alert">
                                <div class="mask"></div>
                                <div class="dlg-container">
                                    <div class="dlg-body">
                                        信息保存成功
                                    </div>
                                    <div class="dlg-foot">
                                        <button class="btn btn-nice dlg-ok">确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="cell-12-6 demo-dlg">
                            <div class="dlg dlg-confirm">
                                <div class="mask"></div>
                                <div class="dlg-container">
                                    <div class="dlg-body">
                                        确定要删除吗？
                                    </div>
                                    <div class="dlg-foot">
                                        <button class="btn dlg-cancel">取消</button>
                                        <button class="btn btn-key dlg-yes">删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid-row-full">
                        <div class="cell-12-6 demo-dlg">
                            <div class="dlg dlg-prompt">
                                <div class="mask"></div>
                                <div class="dlg-container">
                                    <div class="dlg-body">
                                        <label class="dlg-label">用户手机号码</label>
                                        <input type="text" class="input input-full dlg-input" name="" value="" placeholder="请输入" />
                                    </div>
                                    <div class="dlg-foot">
                                        <button class="btn dlg-cancel">取消</button>
                                        <button class="btn btn-theme dlg-yes">确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="cell-12-6 demo-dlg">
                            <div class="dlg dlg-prompt">
                                <div class="mask"></div>
                                <div class="dlg-container">
                                    <div class="dlg-body">
                                        <label class="dlg-label">个性签名</label>
                                        <textarea type="text" class="textarea textarea-full dlg-textarea" name="" value="" placeholder="请输入" ></textarea>
                                    </div>
                                    <div class="dlg-foot">
                                        <button class="btn dlg-cancel">取消</button>
                                        <button class="btn btn-theme dlg-yes">确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
            </div>

            <!-- 图标 -->
            <div class="section" id="section-iconfont">
                <h2>图标</h2>
                <h3>.iconfont.icon-*</h3>
                <div>字体图标生成工具：<a href="http://www.iconfont.cn/" target="_blank">ICONFONT.CN</a></div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-12 demo-iconfont">
                            <i class="iconfont icon-done"></i>
                            <i class="iconfont icon-delete"></i>
                            <i class="iconfont icon-add"></i>
                            <br/>
                            <i class="iconfont icon-down"></i>
                            <i class="iconfont icon-down-min"></i>
                            <i class="iconfont icon-right"></i>
                            <i class="iconfont icon-right-min"></i>
                            <i class="iconfont icon-up"></i>
                            <i class="iconfont icon-up-min"></i>
                            <i class="iconfont icon-left"></i>
                            <i class="iconfont icon-left-min"></i>
                            <br/>
                            <i class="iconfont icon-ok"></i>
                            <i class="iconfont icon-error"></i>
                            <i class="iconfont icon-plus"></i>
                            <i class="iconfont icon-stop"></i>
                            <i class="iconfont icon-info"></i>
                            <i class="iconfont icon-warning"></i>
                            <i class="iconfont icon-circle"></i>
                            <i class="iconfont icon-dot"></i>
                            <br/>
                            <i class="iconfont icon-menu"></i>
                            <i class="iconfont icon-list"></i>
                            <i class="iconfont icon-load"></i>
                            <i class="iconfont icon-refresh"></i>
                            <i class="iconfont icon-back"></i>
                            <i class="iconfont icon-search"></i>
                            <i class="iconfont icon-trash"></i>
                            <i class="iconfont icon-lock"></i>
                            <i class="iconfont icon-lock-inverse"></i>
                            <br/>
                            <i class="iconfont icon-window"></i>
                            <i class="iconfont icon-window-inverse"></i>
                            <i class="iconfont icon-apps"></i>
                            <i class="iconfont icon-layer"></i>
                            <i class="iconfont icon-pc"></i>
                            <i class="iconfont icon-pc-inverse"></i>
                            <i class="iconfont icon-switch"></i>
                            <i class="iconfont icon-switch-inverse"></i>
                            <i class="iconfont icon-setting"></i>
                            <i class="iconfont icon-setting-inverse"></i>
                            <i class="iconfont icon-exit"></i>
                            <br/>
                            <i class="iconfont icon-document"></i>
                            <i class="iconfont icon-file"></i>
                            <i class="iconfont icon-file-inverse"></i>
                            <i class="iconfont icon-edit"></i>
                            <i class="iconfont icon-folder"></i>
                            <i class="iconfont icon-pic"></i>
                            <i class="iconfont icon-mail"></i>
                            <br/>
                            <i class="iconfont icon-link"></i>
                            <i class="iconfont icon-chart"></i>
                            <i class="iconfont icon-chart-inverse"></i>
                            <i class="iconfont icon-cart"></i>
                            <i class="iconfont icon-cart-inverse"></i>
                            <i class="iconfont icon-money"></i>
                            <br/>
                            <i class="iconfont icon-download"></i>
                            <i class="iconfont icon-download-inverse"></i>
                            <i class="iconfont icon-upload"></i>
                            <i class="iconfont icon-upload-inverse"></i>
                            <i class="iconfont icon-date"></i>
                            <i class="iconfont icon-time"></i>
                            <i class="iconfont icon-location"></i>
                            <br/>
                            <i class="iconfont icon-show"></i>
                            <i class="iconfont icon-hide"></i>
                            <i class="iconfont icon-radio"></i>
                            <i class="iconfont icon-radio-hover"></i>
                            <i class="iconfont icon-radio-checked"></i>
                            <i class="iconfont icon-checkbox"></i>
                            <i class="iconfont icon-checkbox-hover"></i>
                            <i class="iconfont icon-checkbox-checked"></i>
                            <br/>
                            <i class="iconfont icon-user"></i>
                            <i class="iconfont icon-user-circle"></i>
                            <i class="iconfont icon-user-inverse"></i>
                            <i class="iconfont icon-chat"></i>
                            <i class="iconfont icon-phone"></i>
                            <i class="iconfont icon-phone-circle"></i>
                            <br/>
                            <i class="iconfont icon-theme"></i>
                            <i class="iconfont icon-theme-inverse"></i>
                            <i class="iconfont icon-like"></i>
                            <i class="iconfont icon-like-inverse"></i>
                            <i class="iconfont icon-good"></i>
                            <i class="iconfont icon-good-circle"></i>
                            <i class="iconfont icon-notice"></i>
                            <i class="iconfont icon-notice-circle"></i>
                            <i class="iconfont icon-rocket"></i>
                            <i class="iconfont icon-light"></i>
                            <br/>

                        </div>
                    </div>
                </div>
                <br/>

                <h3>保留图标</h3>
                <div>你可以使用工具生成自定义的字体图标文件，但是一定要包含以下这些图标样式，以保证UI的正常使用。</div>
                <br/>
                <div class="grid">
                    <div class="grid-row">
                        <div class="cell-12-12 demo-iconfont-sys">
                            <i class="iconfont icon-done"></i>
                            <i class="iconfont icon-delete"></i>
                            <i class="iconfont icon-left"></i>
                            <i class="iconfont icon-left-min"></i>
                            <i class="iconfont icon-right"></i>
                            <i class="iconfont icon-right-min"></i>
                            <i class="iconfont icon-down"></i>
                            <i class="iconfont icon-down-min"></i>
                            <i class="iconfont icon-up"></i>
                            <i class="iconfont icon-up-min"></i>
                            <i class="iconfont icon-radio"></i>
                            <i class="iconfont icon-radio-hover"></i>
                            <i class="iconfont icon-radio-checked"></i>
                            <i class="iconfont icon-checkbox"></i>
                            <i class="iconfont icon-checkbox-hover"></i>
                            <i class="iconfont icon-checkbox-checked"></i>
                            <i class="iconfont icon-date"></i>
                            <br/>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 排版 -->
            <div class="section" id="section-text">
                <h2>排版</h2>
                <div class="indent">
                    <div class="h4">《背影》<small>朱自清</small></div>
                    <p>我与父亲不相见已二年余了，<strong>我最不能忘记的是他的背影</strong>。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“<em>事已如此，不必难过，好在天无绝人之路！</em>”</p>
                    <p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
                    <p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有甚么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说，“不要紧，他们去不好！”</p>
                    <p>我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费，才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可。但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心，夜里警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们直是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！</p>
                    <p>我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪，怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子望回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的，过一会说，“我走了；到那边来信！”我望着他走出去。他走了几步，回过头看见我，说，“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。</p>
                    <p>近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独力支持，做了许多大事。那知老境却如此颓唐！他触目伤怀，自然情不能自已。情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年的不见，他终于忘却我的不好，只是惦记着我，惦记着我的儿子。我北来后，他写了一信给我，信中说道，“我身体平安，惟膀子疼痛利害，举箸提笔，诸多不便，大约大去之期不远矣。”我读到此处，在晶莹的泪光中，又看见那肥胖的，青布棉袍，黑布马褂的背影。唉！我不知何时再能与他相见！</p>

                </div>
            </div>

            <!-- 通用类名 -->
            <div class="section" id="section-comm">
                <h2>通用类名</h2>
                <h3>.fsize-*</h3>
                <p>字体尺寸，可选.fsize-[12,14,16,18,20,22,24,26,28,30,32]，（默认支持自适应尺寸，单位rem，兼容px）</p>
                <div>
                    <div class="grid">
                        <div class="grid-row">
                            <div class="cell-12-2">
                                <span class="fsize-12">fsize-12</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-14">fsize-14</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-14">fsize-16</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-18">fsize-18</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-20">fsize-20</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-22">fsize-22</span>
                            </div>
                        </div>

                        <div class="grid-row">
                            <div class="cell-12-2">
                                <span class="fsize-24">fsize-24</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-26">fsize-26</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-28">fsize-28</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-30">fsize-30</span>
                            </div>
                            <div class="cell-12-2">
                                <span class="fsize-32">fsize-32</span>
                            </div>
                        </div>
                    </div>
                </div>

                <h3>.bold</h3>
                <p>文本设置为加粗</p>

                <h3>.normal</h3>
                <p>文本设置为默认</p>

                <h3>.dotted</h3>
                <p>边框风格设置为小圆点</p>

                <h3>.double</h3>
                <p>边框风格设置为双实线</p>

                <h3>.dashed</h3>
                <p>边框风格设置为小短线</p>

                <h3>.indent</h3>
                <p>内部p标签首行缩进2em</p>

                <h3>.radius-*</h3>
                <p>设置四个边框倒角的圆角度数，可选.radius-[1,2,3,4,5,6,7,8,9,10]  .radiusp-[10,20,30,40,50]</p>
                <div class="clearfix">
                    <div class="rdsbox fleft radius-2">.radius-1</div>
                    <div class="rdsbox fleft radius-3">.radius-3</div>
                    <div class="rdsbox fleft radius-4">.radius-4</div>
                    <div class="rdsbox fleft radius-5">.radius-5</div>
                    <div class="rdsbox fleft radius-6">.radius-6</div>
                    <div class="rdsbox fleft radius-7">.radius-7</div>
                    <div class="rdsbox fleft radius-8">.radius-8</div>
                    <div class="rdsbox fleft radius-9">.radius-9</div>
                    <div class="rdsbox fleft radius-10">.radius-10</div>
                </div>
                <div class="clearfix">
                    <div class="rdsboxp fleft radiusp-10">.radiusp-10</div>
                    <div class="rdsboxp fleft radiusp-20">.radiusp-20</div>
                    <div class="rdsboxp fleft radiusp-30">.radiusp-30</div>
                    <div class="rdsboxp fleft radiusp-30">.radiusp-30</div>
                    <div class="rdsboxp fleft radiusp-40">.radiusp-40</div>
                    <div class="rdsboxp fleft radiusp-50">.radiusp-50</div>
                </div>
            </div>

        </div>

        <script src="../js/prime.js"></script>
        <script src="../js/finder.js"></script>
        <script src="../js/eventemitter.js"></script>
        <!-- <script src="../dev_document/js/sizzle.js"></script> -->
        <!-- <script src="../dev_document/js/jquery-3.1.0.js"></script> -->
        <script src="js/demo.js"></script>
    </body>
</html>